<template>
  <div>
    <div class="life-main" v-for="(v,i) in arrlist" :key="i">
        <!-- 头部 -->
      <div class="life-title">
        <div class="life-head-pic">
          <img :src="v.head" alt="">
        </div>
        <!-- 名称 -->
        <div class="life-name">
          <span class="name">{{v.name}}</span>
          <img :src="v.level" alt="">
          <br>
          <span>{{v.date}}</span>
        </div>
        <div class="nomore" @click="fun()">
            <span></span>
            <span></span>
            <span></span>
            <p v-show="bool">不感兴趣</p>
        </div>

      </div>

      <!-- 内容 -->
      <div class="content">
        <div v-for="(v,i) in v.imgurl" :key="i">
          <img :src="v.img" alt="">
        </div>
      </div>

      <!-- 文种商品 -->
      <div class="goodlist">
          <div class="goodlist-title">
            <p>文中商品</p>
            <p><van-icon name="arrow" color="white"/></p>
          </div>

          <div class="goodlist-inner">
              <div class="goodlist-content"  v-for="(v,i) in v.good" :key="i">
                  <div class="goodlist-content-a">
                    <div class="good-pic">
                      <img :src="v.img" alt="">
                    </div>
                    <div class="good-info">
                      <h3>{{v.title | xcc}}</h3>
                      <span class="good-shaky">{{v.shaky}}</span>
                      <div class="price">
                        <span class="good-price">￥{{v.price}}</span>
                        <span class="good-nuit">{{v.nuit}}</span>
                      </div>
                      <img src="/image/Life/cart.png" alt="">
                    </div>
                  </div>
              </div>
              
          </div>
        
      </div>

      <!-- 活动 -->
      <div class="active">
        <img src="/image/Life/huati.png" alt="">
        <span>{{v.active}}</span>
      </div>

      <template v-if="isHide">
        <!-- 只显示摘要的画面 -->
        <div class="hideBg">
            <span class="summary">{{v.content}}</span>
            <div class="showBtn">
                <!-- 绑定点击事件onShow，点击展开全文 -->
                <a href="#" @click.stop.prevent="onShow">全文
                </a>
            </div>
        </div>
      </template>
      <template v-else>
        <!-- 显示完整内容的画面 -->
        <div class="showBg">
            <p>{{ v.content }}</p>
        </div>
      </template>

      <!-- 评论 -->
      <div class="comment">
        <div class="comment-info" v-for="(v,i) in v.comment" :key="i">
          <p>{{v.name}}:</p><span>{{v.content}}</span>
        </div>
      </div>

      <!-- 转评赞 -->
      <div class="more">
        <img src="/image/Life/zhuan.png" alt="" @click="showShare = true">
        

        <input type="text" placeholder="快来评论吧~">

        <!-- 转评赞 -->
        <div class="more-right">
          <div>
            <van-icon name="chat-o" size="25"/>
            <span>1</span>
          </div>
          <div>
            <van-icon name="good-job-o" size="25"/>
            <span>1</span>
          </div>
          <div>
            <van-icon name="star-o" size="25"/>
            <span>1</span>
          </div>
          </div>
        
      </div>
      
  </div>
  <van-share-sheet v-model="showShare" :options="options" />
</div>
  
</template>

<script>
export default {
    name:"life-main",
    props:["arrlist"],
    data(){
      return{
        bool: false,
        isHide: true,    //初始值为true，显示为折叠画面
        showShare: false,
      options: [
        [
        {
          name: '微信',
          icon: '/image/Life/zhuan1.png',
        },
        {
          name: '朋友圈',
          icon: '/image/Life/zhuan2.png',
        },
        {
          name: 'QQ',
          icon: '/image/Life/zhuan3.png',
        },
        {
          name: '微博',
          icon: '/image/Life/zhuan4.png',
        },
        {
          name: '钉钉',
          icon: '/image/Life/zhuan5.png',
        },
        {
          name: '短信',
          icon: '/image/Life/zhuan6.png',
        }
        ],
        [
        {
          name: '生成海报',
          icon: '/image/Life/zhuan7.png',
        },
        {
          name: '盒口令',
          icon: '/image/Life/zhuan8.png',
        }
        ],
      ]
      }
    },
    methods: {
        onShow(){
            this.isHide = false; //点击onShow切换为false，显示为展开画面
        },
        onHide(){
            this.isHide = true;//点击onHide切换为true，显示为折叠画面
        },
        fun(){
          this.bool=!this.bool
          console.log(1111)
        }
    },
    filters:{
        xcc(val){
            if(val.length>16){
                return val.substr(0,16)+"..."
            }else{
                return val
            }
        }
        
    }
}
</script>

<style scoped>
    .life-main{
        /* width: 100%; */
        padding: .12rem;
        background-color: white;
        position: relative;
        margin-bottom: .1rem;
    }
    .life-title{
        width: 100%;
        height: .575rem;
        display: flex;
        justify-content: space-between;
    }
    .life-head-pic{
        width: .36rem;
        height: .36rem;
        border-radius: 50%;
        overflow: hidden;
    }
    .life-head-pic img{
        width: 100%;
        height: 100%;
        border-radius: .06rem;
    }
    .life-name{
        position: absolute;
        left: .6rem;
        flex-wrap: wrap;
        color: #a2a2a2;
    }
    .life-name .name{
        font-size: .14rem;
        font-weight: bold;
        color: black;
        margin-right: .06rem;
        line-height: .3rem;
    }
    .life-name>img{
        width: .4rem;
        height: .15rem;
    }
    .nomore{
      position: relative;
      width: .5rem;
      text-align: right;
    }
    .nomore p{
      background-color: white;
      border: .01rem solid rgb(235, 227, 227);
      position: absolute;
      top: .3rem;
      right: 0rem;
      width: .6rem;
      height: .3rem;
      line-height: .3rem;
      text-align: center;
    }

    .nomore span{
        display: inline-block;
        width: .03rem;
        height: .03rem;
        background-color: #999999;
        border-radius: 50%;
        margin-left: .03rem;
        margin-top: .22rem;
    }
    .content{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .content img{
        width: 1.26rem;
        height: 1.26rem;
    }
    .goodlist{
        /* display: flex; */
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        height: .76rem;
    }
    .goodlist-title{
        height: .76rem;
        width: .52rem;
        border: 1px solid #eeeeee;
        border-radius: .05rem;
        float: left;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .goodlist-title p:nth-child(1){
        width: 100%;
        padding: .1rem;
        padding-bottom: .03rem;
        text-align: center;
        font-weight: bold;
    }
    .goodlist-title p:nth-child(2){
        display: inline-block;
        width: .12rem;
        height: .12rem;
        background-color: black;
        border-radius: 50%;
    }
    .goodlist-inner{

        display: flex;
        /* float: left; */
        overflow-x: auto;
    }
    .goodlist-content-a{
        width: 2.62rem;
        height: .76rem;
        background-color: #f3f3f3;
        display: flex;
        padding: .09rem;
        border-radius: .05rem;
        margin-left: .06rem;
        float: left;
    }
    .good-pic img{
        width: .58rem;
        height: .58rem;
    }
    .good-info{
        width: 1.8rem;
        margin-left: .06rem;
        margin-top: .06rem;
        position: relative;
    }
    .good-info h3{
        font-size: .12rem;
        margin-bottom: .04rem;
    }
    .good-info .good-shaky{
        display: inline-block;
        text-align: center;
        width: .23rem;
        height: .13rem;
        line-height: .13rem;
        color: #fe6e6d;
        border: 1px solid #ffa2a2;
        border-radius: .02rem;
        font-size: .08rem;
        background-color: white;
    }
    .good-info .price{
        margin-top: .04rem;
    }
    .good-info .good-price{
        font-size: .1rem;
        font-weight: bold;
        color: red;
    }
    .good-nuit{
        font-size: .09rem;
        color: #d3d3d3;
    }

    .active{
      width: fit-content;
      height: .28rem;
      background-color: #f3f3f3;
      border-radius: .11rem;
      margin-top: .1rem;
      padding: .06rem;
      display: flex;
      align-items: center;
    }
    .active img{
      width: .18rem;
      height: .18rem;
      margin: 0 .06rem;
    }
    .active span{
      font-size: .11rem;
    }

    .summary{
      overflow: hidden;
      /* 下面是显示几行写数字几就行 */
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      font-size: .12rem;
      margin-top: .12rem;
    }
    .comment{
      width: 100%;
      margin-top: .1rem;
      background-color: #f3f3f3;
      border-radius: .03rem;
    }
    .comment-info{
      display: flex;
      vertical-align: middle;
      padding: .05rem .09rem;
    }
    .comment-info p{
      font-size: .11rem;
      font-weight: bold;
    }
    .comment-info span{
      font-size: .12rem;
      margin-left: .09rem;
    }
    .more{
      /* width: .2rem; */
      margin-top: .18rem;
      height: .3rem;
      display: flex;
      align-items: center;
      position: relative;
    }
    .more img{
      width: .2rem;
      height: .2rem;
    }
    .more input{
      width: 1.2rem;
      height: .3rem;
      margin-left: .17rem;
      outline: none;
      border: none;
      background-color: #f3f3f3;
      border-radius: .5rem;
      padding-left: .09rem;
    }
    .more-right{
      width: 1.5rem;
      display: flex;
      justify-content: space-between;
      position: absolute;
      right: 0;
    }
    .more span{
      position: relative;
      top: -.17rem;
    }

    .good-info img{
      width: .24rem;
      height: .24rem;
      position: absolute;
      right: 0;
      bottom: 0rem;
    }
</style>